<script lang="ts" setup>
import { ref } from "vue";
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import UniPopup from "../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import UniPopupMessage from "../../uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue";
import BHeader from "../../components/header/bHeader.vue";

const popup = ref();
const popupMsg = ref("");

const visitHospital = [
  { name: "挂号看病", icon: "plus", bgColor: "#E8F4FF", iconColor: "#0066FF" },
  {
    name: "看病后缴费",
    icon: "wallet",
    bgColor: "#FFF2E8",
    iconColor: "#FF6B00",
  },
  {
    name: "报告查询",
    icon: "paperplane",
    bgColor: "#E8F9FF",
    iconColor: "#00A3FF",
  },
  {
    name: "门诊预约",
    icon: "calendar",
    bgColor: "#EEE8FF",
    iconColor: "#6B00FF",
  },
  { name: "排队叫号", icon: "staff", bgColor: "#FFE8F7", iconColor: "#FF00B8" },
  {
    name: "修改手机号",
    icon: "phone",
    bgColor: "#E8FFF4",
    iconColor: "#00FF88",
  },
];

const publicHealth = [
  {
    name: "居民健康档案",
    icon: "list",
    bgColor: "#FFE8E8",
    iconColor: "#FF0000",
  },
  {
    name: "家庭医生签约",
    icon: "compose",
    bgColor: "#E8FFFA",
    iconColor: "#00FFD1",
  },
  { name: "居家监测", icon: "home", bgColor: "#FFF6E8", iconColor: "#FFB100" },
  { name: "疫苗预约", icon: "help", bgColor: "#F0E8FF", iconColor: "#8400FF" },
];

const onlineHospital = [
  {
    name: "互联网诊疗",
    icon: "chat",
    bgColor: "#E8FFF0",
    iconColor: "#00FF44",
  },
  { name: "线上门诊", icon: "shop", bgColor: "#FFE8F2", iconColor: "#FF0077" },
];

const handleClick = (name: string) => {
  popupMsg.value = `您点击了${name}`;
  popup.value.open();
};


</script>

<template>

  <b-header title="医疗服务"></b-header>

  <view class="back">
    <view class="container">
      <!-- Banner -->
      <view class="banner">
        <image
            class="banner-img"
            src="../../static/img/server/sqtltp.png"
            mode="widthFix"
        />
      </view>

      <!-- 来院就医 -->
      <view class="section">
        <text class="section-title">来院就医</text>
        <view class="grid">
          <view
              class="grid-item"
              v-for="(item, index) in visitHospital"
              :key="index"
              @click="handleClick(item.name)"
          >
            <view class="icon-wrapper" :style="{ backgroundColor: item.bgColor }">
              <uni-icons :type="item.icon" size="28" :color="item.iconColor" />
            </view>
            <text class="grid-text">{{ item.name }}</text>
          </view>
        </view>
      </view>

      <!-- 公共卫生服务 -->
      <view class="section">
        <text class="section-title">公共卫生服务</text>
        <view class="grid">
          <view
              class="grid-item"
              v-for="(item, index) in publicHealth"
              :key="index"
              @click="handleClick(item.name)"
          >
            <view class="icon-wrapper" :style="{ backgroundColor: item.bgColor }">
              <uni-icons :type="item.icon" size="28" :color="item.iconColor" />
            </view>
            <text class="grid-text">{{ item.name }}</text>
          </view>
        </view>
      </view>

      <!-- 互联网医院 -->
      <view class="section">
        <text class="section-title">互联网医院</text>
        <view class="grid">
          <view
              class="grid-item"
              v-for="(item, index) in onlineHospital"
              :key="index"
              @click="handleClick(item.name)"
          >
            <view class="icon-wrapper" :style="{ backgroundColor: item.bgColor }">
              <uni-icons :type="item.icon" size="28" :color="item.iconColor" />
            </view>
            <text class="grid-text">{{ item.name }}</text>
          </view>
        </view>
      </view>

      <!-- 提示弹窗 -->
      <uni-popup ref="popup" type="message">
        <uni-popup-message type="success" :message="popupMsg" :duration="2000" />
      </uni-popup>
    </view>
  </view>
</template>



<style scoped lang="scss">

@use "../../static/css/main";

.back {
  @include main.useTheme() {

    .container {
      min-height: 100%;
      padding: 0 0 40rpx 0;
      background-color: main.getVal("two_lv_bg_color");
    }

    .nav {
      position: relative;
      display: flex;
      align-items: center;
      height: 88rpx;
      background-color: main.getVal("two_lv_bg_color");
      padding: 0 30rpx;
    }

    .back-icon {
      width: 48rpx;
      height: 48rpx;
    }

    .title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-size: 34rpx;
      font-weight: 500;
      color: main.getVal("one_lv_text_color");
    }

    .banner {
      width: 100%;
      height: 300rpx;
      background: main.getVal("two_lv_bg_color");
    }

    .banner-img {
      width: 100%;
      height: 300rpx;
    }

    .section {
      margin-top: 20rpx;
      padding: 30rpx;
      background: main.getVal("primary_bg_color");
      border-radius: 16rpx;
    }

    .section-title {
      font-size: 32rpx;
      font-weight: 500;
      color: main.getVal("one_lv_text_color");
      margin-bottom: 30rpx;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30rpx;
      margin-top: 50rpx;
    }

    .grid-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16rpx;
    }

    .icon-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 96rpx;
      height: 96rpx;
      border-radius: 20rpx;
    }

    .grid-text {
      font-size: 26rpx;
      color: main.getVal("one_lv_text_color");
      text-align: center;
    }

    .cursor-pointer {
      cursor: pointer;
    }
  }
}
</style>
